<template>
	<div class="cart-ctrl">
		<div class="cart-reduce" v-show="food.count > 0" @click.stop.prevent="reduceCart" transition="move">
			<span class="inner icon-remove_circle_outline"></span>
		</div>
		<div class="cart-num" v-show="food.count > 0">{{ food.count }}</div>
		<div class="cart-add icon-add_circle" @click.stop.prevent="addCart">
		</div>
	</div>
</template>
<script>
 	import Vue from 'vue'
	export default {
		props: {
			food: {
				type: Object
			}
		},
		methods: {
			addCart(event) {
				if(!event._constructed) {
					return
				}
				if(!this.food.count){
					Vue.set(this.food, 'count', 1)
				}
				else {
					this.food.count++
				}
				// 派发一个事件到goods组件
				this.$dispatch('cart.add', event.target)
			},
			reduceCart(event) {
				if(!event._constructed) {
					return
				}
				if(this.food.count){
					this.food.count--
				}
			}
		}
	}
</script>
<style lang="stylus" rel="stylesheet/stylus">
	.cart-ctrl
		font-size: 0
		display: flex
		flex-direction: row
		.cart-reduce, .cart-num, .cart-add
			display: inline-block
			vertical-align: top
		.cart-num
			width: 24px
			line-height: 24px
			font-size: 10px
			color: rgb(147, 153, 159)
			text-align: center
		.cart-reduce
			transition: all .4s linear
			&.move-transition
				opacity: 1
				transform: translate3d(0, 0, 0)
				.inner
					display: inline-block
					transition: all .4s linear
					transform: rotate(0)
			&.move-enter, &.move-leave
				opacity: 0
				transform: translate3d(24px, 0 , 0)
				.inner
					transform: rotate(180)
			
			.inner
				font-size: 24px
				line-height: 24px
				padding: 0 6px
				color: rgb(0, 160, 220)
		.cart-add
			font-size: 24px
			line-height: 24px
			padding: 0 6px
			color: rgb(0, 160, 220)
</style>